@import "_normal";
@import "_public";

#app{
	overflow-x: hidden;
}
.flexBox{
	display: flex;
	flex-direction: column;
}
.flexCol{
	flex: 1;
}
.loginBox{
	background: url(../img/login/bottompic.png) no-repeat 0 bottom;
	background-size: 100% auto;
	text-align: center;
	@include elementSize(100%,100%);
	.login-title {
		padding-top: 1.1rem;
		background: url(../img/login/yzm_circle.png) no-repeat;
		background-position: 1.89rem 0.9rem;
		background-size: 0.74rem 0.74rem;
		h1{
			font-size: 0.6rem;
		}
		p{
			padding-top: .3rem;
			font-size: 0.28rem;
			color: #999999;
			span{
				color:#000
			}
		}
		&.roles-title{
			padding-top: .9rem;
			height: 2.4rem;
		}
	}
	.input_box{
		@include elementSize(5.2rem,1.1rem);
		background: #f7f7f7;
		border-radius: 0.55rem;
		padding: 0 0.8rem;
		margin: .88rem auto 1.56rem;
		position: relative;
		input{
			@include elementSize(100%,100%);
			text-align: center;
			caret-color: $main-color;
			font-size: 0.4rem; font-weight: bold;
			line-height: .6rem;
		}
		.em_box{
			@include elementSize(.24rem,100%);
			background: url(../img/icon/close.png) no-repeat 0 center;
			background-size: 100%;
			position: absolute; right: .4rem; top: 0;
		}
	}
	.login-go{
		@include elementSize(1.3rem,1.3rem);
		margin: 0 auto;
		border-radius: 1.3rem;
		background: url(../img/login/yzm_go.png) no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
		&.logingo-ok{
			background: url(../img/login/yzm_go_ok.png) no-repeat;
			background-size: 100%;
			box-shadow: 0rem 0.1rem 0.2rem 0 rgba(0,205,134,.25);
		}
		&.login-loading{
			i{
				@include elementSize(100%,100%);
				display: block;
				background: $main-color url(../img/login/loading.png);
				background-size: 100%;
				animation: rotateAni 1s infinite linear;
				border-radius: 1.3rem;
			}
			box-shadow: 0rem 0.1rem 0.2rem 0 rgba(0,205,134,.25);
		}
	}
	.check-input{
		position: relative;
		margin: .87rem 0 .46rem;
		.num-list{
			margin: 0 .73rem;
			justify-content: space-between;
			li{
				@include elementSize(.84rem,1rem);
				line-height: 1rem;
				background: #f7f7f7;
				border-radius: .2rem;
				text-align: center;
				.cursor {
					@include elementSize(.04rem,.32rem);
					background: $main-color;
					margin: .34rem .4rem;
					animation: fadeIn 1s infinite;
				}
				.num{
					font-size: .48rem;
					font-weight: bold;
				}
			}
		}
		.check-num{
			position: absolute; top: 0; left: -100%;
			@include elementSize( 200%, 1rem);
			background: transparent;
			font-size: 0.46rem;
			font-weight: bold;
		}
	}
	.btn-send{
		color: #999; font-size: .28rem;
		margin-bottom: 1.38rem;
		span{
			color: $main-color;
		}
	}
	.role-content{
		margin-top: .22rem;
		.role-body{
			@include elementSize(100%,6.1rem);
			padding: .5rem 0;
			overflow:hidden;
			overflow-x: scroll;
			-webkit-overflow-scrolling: touch;
			&::-webkit-scrollbar{
				display:none;
			}
		}
		.role-list{
			width: 100rem;
			padding-left: 0.6rem;
			box-sizing: content-box;
		}
		.role-box{
			@include elementSize(3.02rem,5.1rem);
			border-radius: 0.4rem;
			margin-right: 0.28rem;
			padding: 0.8rem 0.34rem 0;
			font-size:0.28rem;
			text-align: center;
			box-shadow: 0 0 0.5rem rgba(0,0,0,.08);
			position: relative;
			.chose-icon{
				@include elementSize(0.64rem,0.64rem);
				position: absolute;
				top: 0.2rem;
				right:0.2rem;
				border-radius: 50%;
				background: $main-color url(~@/assets/img/icon/chose.png) no-repeat center center;
				background-size: 0.33rem 0.25rem;
			}
			.head{
				width: 1.28rem;
				height: 1.28rem;
				background: #ebeef2;
				border-radius: 50%;
				position: relative;
				margin: 0 auto;
				img{
					border-radius: 50%;
					@include elementSize(100%,100%);
				}
				span{
					position: absolute;
					bottom: 0;
					right: 0.06rem;
					width: 0.44rem;
					height: 0.44rem;
					background: #85cd0d;
					border-radius: 50%;
					font-size: 0.24rem;
					line-height: 0.44rem;
					color: #fff;
					&.t{
						background: #ffb600;
					}
				}
			}
			.name{
				font-size: 0.36rem;
				font-weight: bold;
				color: #000;
				line-height: 1;
				padding: 0.38rem 0 0.22rem;
				width: 100%;
				@include line-ellipsis();
			}
			.class{
				color: #999;
				@include elementSize(100%, .4rem);
				@include line-ellipsis();
			}
			.school{
				color: #666;
				line-height: 0.4rem;
				padding-top: 0.16rem;
				width: 100%;
				@include multiline-ellipsis(2);
			}
		}
	}
}
.u-btn{
	background: $key-color;
}
.u-title{
	background: url(../img/icon/bg_title.png) no-repeat;
	background-size: 100%;
	@include elementSize(100%, .86rem);	
	font-size: .42rem; color: #fff;
	font-weight: bold;
	letter-spacing: .05rem;
	text-align: center;
	line-height: .66rem;
	padding: .2rem 0 0 .2rem;
}
.u-collapseBtn{
	@include elementSize(2.5rem, .6rem);
	line-height: .6rem;
	border-radius: .6rem;
	background: #fff4e1;	
	color: #82bdae;
	text-align: center;
	position: relative;
	margin: .54rem auto 0;
	span{
		position: relative;
		padding-right: .32rem;
	}
	span::after{
		content: '';
		background: url(../img/icon/arrow_right_green.png) no-repeat 0 center;
		background-size: 100%;
		@include elementSize(.2rem, 100%);
		position: absolute; right: 0; top: 0;
	}
}
.m-bompart{
	position: fixed; bottom: 0; left: 0;
	width: 100%;
	z-index: 5;
}
.layermain{
    position: fixed; top: 0;
    left: 0;
    width: 100%; height: 100%;
    z-index: 3001;
    .layer{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        background: #fff;
        border-radius: .6rem;
        width: 6.24rem; min-height: 4.16rem;
        .con{
            padding: .8rem 0 0;
            h3{
                font-size: .36rem;
            }
            .u-tips{
                font-size: .28rem; color: #666666;
                line-height: .36rem;
                margin-top: .3rem;
            }
            .btnbox{
                padding: .4rem .64rem .64rem;
                display: flex;
				justify-content: space-between;
                .u-btn{
                    width: 2.28rem; height: .8rem;
                    line-height: .8rem;
                    border-radius: .8rem;
                    color: #fff;
                }
                .cancel{
                    background: #ebeef2;
                    color: #74899e;
                }
            }
		}
    }
	.close{
		position: absolute; bottom: -.75rem; left: 50%;
		transform: translateX(-50%);
		background: url(../img/icon/mask-close.png) no-repeat;
		background-size: 100%;
		z-index: 2;
		width: .7rem; height: .7rem;
	}
}
.m-foot_btnBox{
	position: fixed; bottom: 2.16rem; left: 0; right: 0;
	display: flex;
	justify-content: center;
	.u-btn{
		background: #cbf0f0; 
		font-size: .34rem; color: #05b3b6;
		width: 3.2rem; height: .88rem;
		line-height: .88rem;
		border-radius: .88rem;
		text-align: center;
	}
}
// 星星
.stars{
	height: 100%;
	display: flex;
	justify-content: center;
	span{
		background: url(../img/icon/star.png) no-repeat 0 center;					
		background-size: 100%;
		width: .34rem; height: 100%;
		margin: 0 .03rem;
	}
}

.vTabs{
	width: 5.5rem; height: .8rem;
	line-height: .8rem;
	text-align: center;
	font-size: .4rem; color: #82bdae;
	font-weight: bold;
	display: flex;
	background: #fff4e1;
	border-radius: .8rem;
	margin: 0 auto;
	overflow: hidden;
	.tab-nav{
		width: 50%;
	}
	.tab-nav.on{
		background: #82bdae;
		color: #fff;
	}
}	
.vTabs_con{
	.table_head{
		width: 100%; height: .62rem;
		line-height: .62rem;
		font-size: .3rem; color: #333;
		font-weight: bold;
		background: #e5dccc;
		border-radius: .62rem;
		display: flex;
		justify-content: space-between;
		padding: 0 .36rem;
		margin: .35rem 0 .2rem;
		span{
			padding-left: .12rem;
		}
		span:nth-child(2){
			padding-right: .55rem;
		}
	}
	.table_list{
		padding: 0 .2rem;
		.libox{
			padding: .2rem 0;
			height: 1.1rem;
			border-bottom: 1px dashed #e3d4bb;
			display: flex;
			align-items: center;
			>div{
				margin-left: .12rem;
			}
		}
		&.self_li{
			.libox{
				border-bottom: 4px dotted #fff4e1;
				.vinfo,.vScore,.vInd{
					font-weight: bold;
					color: #7a503f;
				}
			}
		}
	}
	.self_con{
		padding: .2rem;
		height: 1.1rem;
		border-bottom: 4px dotted #d2ebec;
		display: flex;
		align-items: center;
		>div{
			margin-left: .12rem;
		}
	}
	
	.vInd{
		width: 1rem; height: .46rem; line-height: .46rem;
		font-size: .3rem; color: #82bdae;
		span{
			padding: 0 .1rem; 
			height: .46rem;
			border-radius: .46rem;
			background: #f5ecdb;
			float: left;
			min-width: .5rem;
			text-align: center;
		}
	}
	.vInd0,.vInd1,.vInd2{
		height: .52rem;
		span{
			opacity: 0;
		}
	}
	.vInd0{
		background: url(../img/preliminary/number1.png) no-repeat;
		background-size: auto 100%;
	}
	.vInd1{
		background: url(../img/preliminary/number2.png) no-repeat;
		background-size: auto 100%;
	}
	.vInd2{
		background: url(../img/preliminary/number3.png) no-repeat;
		background-size: auto 100%;
	}
	.vName{
		flex: 1;
		color: #333333;
		display: flex;
		align-items: center;
		.avater{
			width: .7rem; height: .7rem;
			border-radius: .7rem;
			overflow: hidden;
			float: left;;
			margin-right: .34rem;
		}
		span{
			font-size: .3rem;
			display: block;
		}
		i{
			font-size: .22rem;
			display: block;
		}
	}
	.vScore{
		width: 1.3rem;
		text-align: right;
	}
}
.view{
	.show-menu{
		position: absolute;
		transform: translate(6.3rem, 1.24rem);
		img{
			width: .98rem; height: .98rem;
			margin-bottom: .12rem;
		}
	}
	.up-num{
		position: absolute; top: .45rem; right: 0;
		padding: 0 .3rem 0 .25rem;
		font-size: .24rem; color: #ffffff;
		background: #908e8a;
		height: .6rem; line-height: .6rem;
		border-radius: .3rem 0 0 .3rem;
		span{
			color: #ffd300;
		}
	}

	.logo{
		position: absolute; top: .42rem; left: .32rem;
		@include elementSize(3.16rem, .58rem);	
	}
	.ruleImg{
		width: 6.9rem;
		margin: .32rem auto 0;
		border-radius: .25rem;
		overflow: hidden;
	}
}

// 报名页
.page-signup{
	background: #eaeee8 url(~@/assets/img/signup/bg.jpg) no-repeat;
	background-size: 100%;
	min-height: 100%;
	.m-header{
		@include elementSize(100%, 9.9rem);	
		position: relative;
		.timeCut{
			position: absolute; top: 4.05rem; left: 50%;
			transform: translateX(-50%);
			font-size: .6rem;
			font-weight: bold;
			white-space: nowrap;
			.day{
				color: #c92020;
				font-size: .72rem;
			}
			&::before,&::after{
				content: "\20";
				position: absolute; top: 50%;
				transform: translateY(-50%);
				margin-top: .07rem;
				width: .58rem;
				border-top: .02rem solid #1d1404;
			}
			&::before{
				left: -.5rem;
			}
			&::after{
				right: -.5rem;
			}
		}
		.session{
			position: absolute; top: 1.78rem; left: 2.9rem;
			@include elementSize(1.58rem, .64rem);	
			background: url(../img/signup/sessionbg.png) no-repeat;
			background-size: 100%;
			font-size: .34rem; color: #fff;
			font-weight: bold;
			line-height: .6rem;
			text-align: center;
			
		}
	}
	.rank_box{
		.bg_box{
			position: relative;
			width: 100%; min-height: 4rem;
			background: url(~@/assets/img/signup/repeatBg.png) repeat;
			border-radius: .2rem;
			padding:.4rem .2rem .73rem;
			overflow: hidden;
			&::after {
				content: '\20';
				@include elementSize(100%, 3.3rem);	
				position: absolute; bottom: 0; left: 0;
				background: url(~@/assets/img/signup/bgRepeat_bom.png);
				background-size: 100% auto;
			}
			>div{
				position: relative;
				z-index: 2;
			}
			.rank_title{
				display: flex;
				align-items: center;
				font-size: .4rem;
				font-weight: 550;
				justify-content: space-between;
				padding: 0 .07rem 0 .3rem;
				.stateTot{
					@include elementSize(2.14rem, .62rem);
					line-height: .62rem;
					border-radius: .62rem;
					position: relative;
					text-align: center;
					font-size: .3rem;
					background: #e5dccc;
					color: #b79f8a;
					&._act{
						background: #82bdae;
						color: #fff;
						span{
							position: relative;
							padding-right: .32rem;
						}
						span::after{
							content: '';
							background: url(../img/icon/arrow_right.png) no-repeat 0 center;
							background-size: 100%;
							@include elementSize(.2rem, 100%);
							position: absolute; right: 0; top: 0;
						}
					}
				}
			}
			.txtbox{
				width: 100%;
				height: .6rem;
				line-height: .6rem;
				background-color: #e5dccc;
				border-radius: .3rem;
				display: flex;
				margin-top: .34rem;
				justify-content: space-between;
				font-size: .3rem; font-weight: bold;
				padding: 0 .6rem 0 .72rem;
			}
			.rank_list{
				z-index: 100;
				position: relative;
				margin-top: .12rem;
				padding: 0 .25rem;
				width: 100%;
				.rank{
					display: flex;
					align-items: center;
					font-size: .36rem;
					padding: .3rem 0;
					border-bottom: .05rem dotted #e3d4bb;
					.rank_img{
						width: .7rem;
						height: .7rem;
						border-radius: .35rem;
						overflow: hidden;
						margin: 0 .3rem;
					}
					.rank_name{
						flex: 1;
						@include line-ellipsis();
					}
					.rank_status{
						width: 1.9rem;
						text-align: center;	
					}
					.unSign{
						color: #b79f8a;
					}
				}
			}
			.rule-item{
				font-size: 0.36rem;
				font-weight: 400;
				display: block;
				.rule-title {
					display: inline-block;
					height: 0.62rem;                
					line-height: 0.62rem;
					background-color: $key-color;
					border-radius: 0.32rem;
					color: #fff;
					font-size: 0.4rem;
					padding: 0 0.34rem;
                } 
                .rule-tips {
					padding: 0.2rem .2rem 0.4rem;
					line-height: .48rem;
                }
			}
		}
	}
	.signup-btn{
		margin: 0 auto;
		width: 6.27rem;
	}
	.m-con{
		padding-bottom: 1rem;
	}
	.m-con.student{
		padding-bottom: 3rem;
	}
	.layer-sign{
		position: absolute;
		left: 0; top: 50%;
		transform: translateY(-50%);
		margin-top: -.75rem;
		text-align: center;
		width: 7.5rem; height: 8.26rem;
		.con{
			width: 100%; height: 100%;
			position: relative;
		}
		.ensure-btn{
			position: absolute; top: 6.32rem; left: 2.3rem;
			width: 3.18rem; height: 1.06rem;
			z-index: 2;
		} 
	}
}

.rank_box{
	width: 6.9rem;
	margin: .32rem auto 0;
	background: #fff;
	border: .02rem #c7b497 solid;
	border-radius: .25rem;
	padding:.05rem;
	.card_box{
		position: relative;
		width: 100%; height: 1.58rem;
		border-radius: .2rem;
		overflow: hidden;
		color: #7a503f;
		padding: .32rem .4rem;
		line-height: 1;
		img{
			position: absolute; top: 0; left: 0;
		}
		>div{
			position: relative; z-index: 2;
		}
		.card-title{
			font-size: .48rem;
			font-weight: bold;
			padding: 0 0 .16rem;
		}
		.card-num{
			font-size: .24rem;
		}
	}
	
	.bg_box{
		position: relative;
		width: 100%; min-height: 4rem;
		background: url(~@/assets/img/signup/repeatBg.png) repeat;
		border-radius: .2rem;
		padding:.4rem .2rem .73rem;
		overflow: hidden;
		&::after {
			content: '\20';
			@include elementSize(100%, 3.3rem);	
			position: absolute; bottom: 0; left: 0;
			background: url(~@/assets/img/signup/bgRepeat_bom.png);
			background-size: 100% auto;
		}
		>div{
			position: relative;
			z-index: 2;
		}
		&.nomal::after{
			display: none;
		}
	}
}

.kite_box{
	width: 6.9rem;
	margin: .32rem auto 0;
	position: relative;
	background: url(../img/preliminary/bgRank_top.png) no-repeat;
	background-size: 100%;
	&::before {
		content: '\20';
		width: 100%;
		position: absolute; top: .52rem; bottom: 2.72rem; left: 0;
		background: url(~@/assets/img/preliminary/bg_Rank.png) repeat-y;
		background-size: 100%;
	}
	&::after {
		content: '\20';
		@include elementSize(100%, 2.72rem);	
		position: absolute; bottom: 0; left: 0;
		background: url(~@/assets/img/preliminary/bgRank_bom.png) no-repeat;
		background-size: 100% auto;
	}
	>div{
		position: relative;
		z-index: 2;
	}
	.bg_box{
		width: 100%; min-height: 6rem;
		position: relative;
		padding: .65rem .4rem 1.47rem;
		&::after{
			content: '\20';
			@include elementSize(2.37rem, 3.53rem);	
			position: absolute; bottom: -2.57rem; left: 3.27rem;
			background: url(~@/assets/img/preliminary/dai.png) no-repeat;
			background-size: 100% auto;
		}
		&::before {
			content: '\20';
			@include elementSize(100%, 3.96rem);	
			position: absolute; bottom: 0; left: 0;
			background: url(~@/assets/img/preliminary/bgbox_bom.png) no-repeat;
			background-size: 100% auto;
		}
		>div{
			position: relative;
			z-index: 2;
		}
		.u-collapseBtn{
			margin-top: 1rem;
		}
	}
	&.second{
		background: url(../img/preliminary/bgRank_top_second.png) no-repeat;
		background-size: 100%;
		
		&::before {
			background: url(~@/assets/img/preliminary/bg_Rank_second.png) repeat-y;
			background-size: 100%;
		}
		&::after {
			background: url(~@/assets/img/preliminary/bgRank_bom_second.png) no-repeat;
			background-size: 100% auto;
		}
		
		.vTabs{
			background: #e1f6f0;
		}
		.vTabs_con{
			.table_head{
				background: #b9dbcf;
			}
			.vInd{
				color: #5f9fa4;
				span{
					background: #d4ece5;
				}
			}
		}
		.u-collapseBtn{
			background: #e1f6f0;
			color: #5f9fa4;
		}
	}
}
// 初赛
.page-preliminary{
	background: #eaeee8 url(~@/assets/img/preliminary/bg.jpg) no-repeat;
	background-size: 100%;
	min-height: 100%;
	position: relative;
	&::after {
		content: '\20';
		@include elementSize(100%, 4.46rem);	
		position: absolute; bottom: 0; left: 0;
		background: url(~@/assets/img/preliminary/bg_bom.jpg) no-repeat;
		background-size: 100% auto;
	}
	>div{
		position: relative;
		z-index: 2;
	}
	.m-header{
		@include elementSize(100%, 13rem);	
		position: relative;
		.logo{
			position: absolute; top: .42rem; left: .32rem;
			@include elementSize(3.16rem, .58rem);	
		}
		.session{
			position: absolute;
			transform: translate(2.9rem, 4.92rem);
			@include elementSize(.81rem, 1.57rem);	
			background: url(../img/preliminary/sessionbg.png) no-repeat;
			background-size: 100%;
			font-size: .34rem; color: #fff;
			line-height: .38rem;
			padding: .2rem .2rem;
			text-align: center;
		}
	}
	.m-plate{
		background: url(../img/preliminary/bg_plate.png) no-repeat;
		background-size: 100%;
		width: 6.9rem; height: 3.55rem;
		margin: 0 auto;
		position: relative;
		.tit{
			background: url(../img/preliminary/platetit.png) no-repeat;
			background-size: 100%;
			width: 2.06rem; height: .48rem;
			line-height: .48rem;
			font-size: .32rem; color: #82bdae;
			font-weight: bold;
			text-align: center;
			letter-spacing: .05rem;
			position: absolute; left: 2.4rem; top: .98rem;
		}
	}
	
	.plateBox{
		padding: 1.82rem .8rem 0 .9rem;
		color: #7a503f;
		display: flex;
		justify-content: space-between;
		&.stu{
			padding: 1.72rem .6rem 0 .7rem;
			.vinfo{
				margin-top: .1rem;
			}
		}
		.vcon.flexFull{
			flex: 1;
			padding: 0 .2rem 0 .25rem;
		}
		.vuserImg{
			width: 1.24rem;
			height: 1.24rem;
			border-radius: 50%;
			background: #fff7e9;
			padding: .06rem;
			border: 1px solid #d0c1a8;
			margin-top: .1rem;
			img{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.vname{
			font-size: .4rem;
			font-weight: bold;
		}
		.vinfo{
			font-size: .3rem;
			margin-top: .2rem;
		}
		.rankicon{
			background: url(../img/preliminary/Num5.png) no-repeat;
			background-size: 100%;
			width: 1.21rem; height: 1.3rem;
			line-height: 1.1rem;
			span{
				opacity: 0;
			}
			&.rank1{
				background: url(../img/preliminary/Num1.png) no-repeat;
				background-size: 100%;
			}
			&.rank2{
				background: url(../img/preliminary/Num2.png) no-repeat;
				background-size: 100%;
			}
			&.rank3{
				background: url(../img/preliminary/Num3.png) no-repeat;
				background-size: 100%;
			}
			&.rankon span{
				opacity: 1;
				display: block;
				width: 100%; height: 100%;
				text-align: center;
				font-size: .46rem; color: #fff;
			}
			&.rankov span{
				font-size: .36rem;
			}
		}
	}
	.m-con{
		padding: .5rem 0 4.7rem;
		.rank_box{
			margin-bottom: .8rem;
		}
	}

}
// 规则
.page-rule{
	background: #e3e8e0 url(~@/assets/img/preliminary/bg_rule.jpg) no-repeat;
	background-size: 100%;
	min-height: 100%;
	.m-header{
		height: 5.56rem;
	}
	.m-con{
		padding-bottom: .7rem;
	}
}

// 飞花令
.page-game{
	background: #fffaef url(../img/game/gamebg.jpg) no-repeat;
	background-size: 100%;
	position: relative;
	padding-bottom: 3.8rem;
	min-height: 100%;
	&::after{
		content: '';
		position: absolute; bottom: 0; left: 0;
		background: url(../img/game/gamebg_bom.jpg) no-repeat;
		background-size: 100%;
		width: 100%; height: 4.26rem;
	}
	>div{
		position: relative;
		z-index: 2;
	}
	.m-head{
		padding-top: 7.3rem;
		height: 8.4rem;
		z-index: 3;
		.game-level{
			width: 6.04rem; height: .64rem;
			line-height: .64rem;
			background: rgba($color: #05b3b6, $alpha: .2);
			border-radius: .64rem;
			margin: 0 auto;
			padding-left: .3rem;
			>div{
				float: left;
			}
			.level-title{
				font-weight: bold;
				color: #05b3b6;
				padding-left: .22rem;
			}
			.level-select{
				width: 2.2rem; height: 100%;
				float: right;
				.u-select_inner{
					border-radius: .64rem;
					background: #05b3b6;
					.u-input input{
						color: #fff;
						-webkit-text-fill-color: #fff;
					}
				}
				.u-select_dropdown_foot li{
					margin: .3rem auto 0;
					width: 5.2rem; height: .8rem;
					line-height: .8rem;
					border-radius: .8rem;
					background: #f3f5f7;
					.leveli{
						width: 100%; height: 100%;
						display: flex;
						align-items: center;
						font-size: .32rem; font-weight: bold;
						.stars{
							width: 3.24rem;
						}
					}
					&.selected{
						background: #cdf0f0; color: #05b3b6;
					}
				}
				
			}
		}
	}
	.m-con{
		padding: 0 .2rem;
		.box-list{
			background: url(../img/game/bg_brand.png) no-repeat;
			background-size: 100%;
			width: 1.52rem; height: 3.42rem;
			text-align: center;
			padding-top: .42rem;
			margin: .26rem .12rem 0;
			float: left;
			.index{
				background: url(../img/game/bg_index.png) no-repeat;
				background-size: 100%;
				width: .64rem; height: .64rem;
				line-height: .64rem;
				color: #fff;
				margin: 0 auto;
			}
			.name{
				color: #b35c00; font-weight: bold;
				padding-top: .66rem;
			}
		}
	}
}
.page-gameMatch{
	background: url(../img/game/bg_mate.jpg) no-repeat;
	background-size: 100%;
	position: relative;
	>div{
		position: relative;
		z-index: 2;
	}
	&::after{
		content: '';
		width: 100%; height: 100%;
		background: url(../img/game/bg_mate_bom.png) no-repeat 0 bottom;
		background-size: 100%;
		position: absolute; bottom: 0; left: 0;
		z-index: 1;
	}
	.timer{
		position: absolute; top: 3.2rem; left: 2.42rem;
		width: 2.66rem;
		font-size: .48rem; color: #5c2126;
		font-weight: bold;
		text-align: center;
	}
	.m-con{
		padding-top: 4.68rem;
		.matchBox{
			.match-self{
				text-align: center;
				width: 50%;
				float: left;
				line-height: 1;
				.avater{
					width: 1.72rem; height: 1.72rem;
					border-radius: 100%;
					background: #ffd300;
					padding: .1rem;
					margin: 0 auto;
					position: relative;
					img{
						border-radius: 1.7rem;
					}
				}
				.name{
					font-size: .36rem; font-weight: bold;
					margin: .3rem 0 .12rem;
				}
				.classname{
					font-size: .24rem;
				}
				.match_loading{
					position: absolute; left: 0; top: 0;
					width: 100%; height: 100%;
					background: url(../img/game/matchself.png) no-repeat;
					background-size: 100%;
					animation: rotateAni 1s infinite linear;
				}
			}
		}
	}
}
.page-gameAnswer{
	background: url(../img/game/bg_answer.jpg) no-repeat;
	background-size: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	&::after{
		content: '';
		width: 100%; height: 100%;
		background: url(../img/game/bg_answer_bom.png) no-repeat 0 bottom;
		background-size: 100%;
		position: absolute; bottom: 0; left: 0;
		z-index: 1;
	}
	.m-header{
		position: relative;
		z-index: 2;
		.utitle{
			width: 100%; height: .8rem;
			line-height: .8rem;
			background: url(../img/game/bg_anstitle.png) no-repeat;
			background-size: 100%;
			padding-left: 3.7rem;
			font-size: .48rem; color: #8f520f;
			font-weight: bold;
		}
		.rowbox{
			margin-top: .22rem;
			display: flex;
			justify-content: center;
		}
		.leftbox,.rightbox{
			width: 3rem; height: 1.6rem;
			margin: 0 .11rem;
			position: relative;
			display: flex;
			flex-direction: column;
			.avater{
				width: 1.22rem; height: 1.22rem;
				border-radius: 100%;
				padding: .2rem;
				position: absolute; top: 0;
				img{
					position: relative;
					z-index: 2;
					border-radius: 100%;
				}
				&::after{
					content: "";
					width: 1.02rem; height: 1.02rem;
					position: absolute; top: .1rem; left: .1rem;
					background: #fff;
					border-radius: 100%;
				}
			}
			.info{
				font-size: .3rem; color: #fff;
				font-weight: bold;
				flex: 1;
				display: flex;
				line-height: .36rem;
				padding-top: .3rem;
				.name{
					width: 1.05rem;
					@include line-ellipsis();
				}
				span{
					font-size: .36rem;
				}
			}
			.wrong{
				height: .73rem;
				display: flex;
				justify-content: center;
				span{
					width: .4rem; height: 100%;
					margin: 0 .09rem;
				}
			}
		}
		.leftbox{
			border-radius: .3rem .1rem .1rem .3rem;
			background: #e1ad3b;
			.avater{
				background: #e1ad3b;
				left: -.42rem;
			}
			.info{
				padding-left: .92rem;
			}
			.wrong{
				background: #d29d3a;
				border-radius: 0 0 .1rem .3rem;
				padding: 0 .22rem 0 .92rem;
				span{
					background: url(../img/game/wrong_left.png) no-repeat 0 center;
					background-size: 100%;
					&.on{
						background: url(../img/game/wrong_left_on.png) no-repeat 0 center;
						background-size: 100%;
						width: .44rem;
					}
				}
			}
		}
		.rightbox{
			border-radius: .1rem .3rem .3rem .1rem;
			background: #05b3b6;
			.avater{
				background: #05b3b6;
				right: -.42rem;
			}
			.info{
				padding-left: .22rem;
			}
			.wrong{
				background: #03a1a4;
				border-radius: 0 0 .3rem .1rem;
				padding: 0 .92rem 0 .22rem;
				span{
					background: url(../img/game/wrong_right.png) no-repeat 0 center;
					background-size: 100%;
					&.on{
						background: url(../img/game/wrong_right_on.png) no-repeat 0 center;
						background-size: 100%;
						width: .44rem;
					}
				}
			}
		}
	}
	.m-con{
		flex: 1;
		position: relative;
		z-index: 2;
		padding: .1rem 0 3rem;
		overflow: auto;
		.answList{
			padding: .48rem .32rem 0;
			.avater{
				width: .8rem; height: .8rem;
				border-radius: .8rem;
				overflow: hidden;
			}
			.vcon{
				width: 5.5rem; min-height: .96rem;
				padding: .34rem .45rem;
				line-height: 1;
				font-size: .3rem; color: #333333;
				background: #fff;
				box-shadow: 0 .05rem .3rem rgba($color: #3b64a8, $alpha: .15);
				font-weight: bold;
				position: relative;
				&.wrong{
					color: #ff7b12;
				}
				&.wrong::after{
					content: '';
					position: absolute; right: .35rem; top: 0;
					background: url(../img/game/wrong_ico.png) no-repeat 0 center;
					width: .48rem; height: 100%;
					background-size: 100%;
				}
			}
		}
		.answList{
			.avater{
				float: left;
				margin-right: .22rem;
			}
			.vcon{
				float: left;
				border-radius: .05rem .96rem .96rem .96rem;
			}
		}
		// 自己
		.answList.self{
			.avater{
				float: right;
				margin-left: .22rem;
			}
			.vcon{
				float: right;
				border-radius: .96rem .05rem .96rem .96rem;
			}
		}
	}
	.m-footer{
		position: absolute; bottom: 1.1rem; left: 1.62rem; right: .88rem;
		z-index: 2;
		.vtips{
			width: 100%; height: 1.2rem;
			background: #fff;
			border-radius: 1.2rem;
			font-size: .36rem; font-weight: bold; color: #05b3b6;
			line-height: 1.2rem;
			padding-left: 1.56rem;
		}
		
		.timer{
			position: absolute; left: -.9rem; top: -.4rem;
		}
	}
	.timer{
		width: 2rem; height: 2rem;
		border-radius: 2rem;
		background: #fff;
		padding: .4rem;
		box-shadow: 0 .05rem .3rem rgba($color: #3b64a8, $alpha: .15);
		span{
			display: block;
			line-height: 1.2rem;
			width: 100%; height: 100%;
			border-radius: 100%;
			text-align: center; 
			font-size: .72rem; color: #fff;
			background: #05b3b6;
		}
		&::after{
			content: '';
			position: absolute; top: 0; left: 0;
			width: 2rem; height: 2rem;
			background: url(../img/game/loading_time.png) no-repeat;
			background-size: 100%;
			animation: rotateAni 1s infinite linear;
		}
	}
	
	.layerCan{
		position: absolute; 
		z-index: 5000;
		canvas{
			background:rgba(255, 255, 255, 0);/*关键点*/
		}
		img,canvas{
			display: block;
			position: relative;
		}
		.drawbtn{
			position: absolute; top: 5.4rem; left: 2.48rem;
			width: 1.98rem; height: 1.98rem;
			z-index: 1;
		}
		&.drawCan{
			top: 50%; left: 50%;
			transform: translate(-50%, -50%);
			canvas{
				width: 6.78rem; height: 8.28rem;
			}
		}
		&.ansCan{
			top: 3.48rem; right: 0;
			canvas{
				width: 4rem; height: 4rem;
			}
		}
		&.endCan{
			top: 50%; left: 50%;
			transform: translate(-50%, -50%);
			margin-top: -1.66rem;
			canvas{
				width: 6.02rem; height: 9.68rem;
			}
			.endCan_box{
				position: absolute; top: 0; left: 0;
				width: 6.02rem; height: 9.68rem;
				padding-top: 4.78rem;
				&.endResImg1{
					background: url(../../../static/img/endRes/success/10001.png) no-repeat;
					background-size: 100%;

				}
				&.endResImg2{
					background: url(../../../static/img/endRes/error/10001.png) no-repeat;
					background-size: 100%;

				}
				.resLi{
					width: 5rem; height: 1.4rem;
					border-radius: 1.4rem;
					margin: 0 auto .3rem;
					color: #fff;
					font-size: .3rem;
					line-height: 1;
					padding: .1rem;
					position: relative;
					.avater{
						width: 1.2rem; height: 1.2rem;
						background: #fff;
						border-radius: 100%;
						padding: 0.08rem;
						float: left;
						img{
							width: 1.04rem; height: 1.04rem;
							border-radius: 100%;
						}
					}
					.vinfo{
						float: left;
						margin-left: .24rem;
						.name{
							font-size: .4rem;
							padding: .2rem 0 .18rem;
						}
					}
					.score{
						position: absolute; right: .4rem; top: .28rem;
						font-size: .24rem; font-weight: bold;
						span{
							font-size: .42rem;
						}
					}
					&.self{
						background: #05b3b6;
					}
					&.match{
						background: #e1ad3b;
					}
				}
				.btnBox{
					position: absolute; bottom: -1.3rem; left: 0;
					width: 100%; height: 1rem;
					.u-btn{
						height: 1rem;
						line-height: 1rem;
						font-size: .4rem; font-weight: bold;
						text-align: center;
					}
					.u-btn.border{
						width: 2.6rem;
						line-height: 0.92rem;
						border-radius: 1rem;
						border: .04rem solid #ffcd5e;
						color: #ffcd5e;
						background: none;
						float: left;
					}
					.u-btn.btnbg{
						float: right;
						color: #8f520f;
						background: url(../img/icon/bg_btn.png) no-repeat;
						background-size: 100%;
						width: 3.1rem;
					}
				}
			}
		}
	}
	.layermain{
		.layer{
			width: 6.86rem;
		}
		.timer{
			position: absolute; top: -.88rem; left: 50%;
			transform: translateX(-50%);
		}
		.con{
			padding-top: 1.4rem;
		}
		.layer .con h3{
			color: #05b3b6;
		}
		.ansCon{
			background: #f3f5f7;
			margin: .18rem .42rem 0;
			height: 1.3rem;
			border-radius: .4rem;
			padding: .4rem;
			input{
				width: 100%;
				font-size: .34rem; color: #333333;
				line-height: .5rem;
			}
		}
		.layer .con .u-tips{
			padding-left: .82rem;
			font-size: .24rem; color: #999999;
			text-align: left;
		}
		.layer .con .btnbox{
			justify-content: center;
			.u-btn{
				background: #05b3b6;
				color: #fff;
			}
		}
		&.empty .layer .con .btnbox .u-btn{
			opacity: .5;
		}
	}
	.anslayer{
		position: absolute; top: 3.48rem; right: 0;
		z-index: 5000;
		width: 4rem; height: 4rem;
		animation: ansTips steps(13,end) 1.2s forwards;
		&.ansTips1{
			background: url(../img/game/ansTipsRight_sprites.png) no-repeat 0 0;
			background-size: auto 100%;
		}
		&.ansTips2{
			background: url(../img/game/ansTipsWrong_sprites.png) no-repeat 0 0;
			background-size: auto 100%;
		}
	}
}

@keyframes ansTips{
	100% { background-position: 100% 0;}
}

// 统计
.page-statistics{
	width: 100%; height: 100%;
	overflow: hidden;
	display: flex; 
	flex-direction: column;
	background: url(../img/statistics/bg_statics.png) no-repeat;
	background-size: 100%;
	&.scrollRow{
		background-position: 0 1rem;
	}
	&::after{
		content: '';
		width: 100%; height: 3.6rem;
		position: absolute; bottom: 0; left: 0;
		background: url(../img/statistics/bg_statics_bom.png) no-repeat 0 bottom;
		background-size: 100%;
	}
	.m-con,.u-scroll_row,.m-header{
		position: relative; z-index: 2;
	}
	.m-con{
		display: flex; 
		flex-direction: column;
		flex: 1;
		padding: .36rem .44rem 2.4rem;
		overflow: hidden;
	}
	.statistics_table{
		.u-table_header{
			width: 100%; height: .64rem;
			background: rgba($color: #05b3b6, $alpha: .1);
			border-radius: .64rem;
			overflow: hidden;
		}
		table{
			table-layout:fixed;
			colgroup{
				width: 100%;
			}
			thead tr{
				height: .64rem;
				font-size: .32rem; color: #05b3b6;
				text-align: left;
				th{
					padding-left: .28rem;
				}
			}
			tbody tr{
				width: 100%;
				height: 1.1rem;
				font-size: .36rem; color: #333333;
				.ind{
					text-align: center;
					color: #05b3b6;
				}
				.score{
					text-align: right;
					padding-right: .2rem;
				}
				.center{
					text-align: center;
				}
				.rate .cell{
					width: 1.4rem;
					text-align: center;
				}
				.arrow{
					position: relative;
					padding-right: .4rem;
					&::after{
						content: '';
						position: absolute;
						top: 0; right: 0;
						width: .25rem; height: 100%;
						background: url(~@/assets/img/icon/arrow_right_light.png) no-repeat 0 center;
						background-size: 100%;
					}
				}
			}
		}
	}
	.vTips_empty{
		position: absolute; top: 2rem; left: 0;
		width: 100%;
		text-align: center;
		color: #666;
	}
	.vTabs_statistics{
		width: 6.64rem; height: .68rem;
		line-height: .68rem;
		text-align: center;
		font-size: .36rem; color: #05b3b6;
		font-weight: bold;
		display: flex;
		background: #d2f2dc;
		border-radius: .68rem;
		margin: 0 auto;
		overflow: hidden;
		.tab-nav{
			width: 50%;
		}
		.tab-nav.on{
			color: #fff;
			background-color: #05b3b6;
		}
	}	
}
// 景点
.page-scence{
	width: 100%; min-height: 100%;
	background: url(../img/statistics/bg_scence.jpg) no-repeat;
	background-size: 100%;
	padding: .52rem 0 3rem 0;
	position: relative;
	>div{
		position: relative; z-index: 2;
	}
	&::after{
		content: '';
		width: 100%; height: 3.5rem;
		position: absolute; bottom: 0; left: 0;
		background: url(../img/statistics/bg_scence_bom.png) no-repeat 0 bottom;
		background-size: 100%;
	}
	.picture {
		position: relative;
		width: 6.6rem; height: 3.9rem;
		margin: 0 auto;
		padding: .25rem .2rem .4rem;
		&::before{
			content: '';
			position: absolute; top: 0; left: 0;
			width: 6.6rem; height: 3.9rem;
			background: url(../img/statistics/picBg.png) no-repeat;
			background-size: 100%;
		}
		.poemty-name {
			position: absolute; top: 2.7rem; left: 50%;
			transform: translateX(-50%);
			padding: 0 .34rem;
			max-width: 4rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			height: 0.6rem; line-height: 0.6rem;
			border-radius: 0.3rem;
			color: #ffffff;
			font-size: 0.3rem;
			text-align: center;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}
	
    .stuInfo {
		color: #999999;
		font-size: 0.3rem;
		line-height: 0.5rem;
		margin-left: 0.63rem;
	}
	
	.btn_encourage {
		width: 100%;
		display: flex;
		margin-top: 0.4rem;
		align-items: center;
		padding: 0 0.66rem;
		justify-content: space-between;
		font-size: 0.4rem;
		height: 0.8rem;
		line-height: 0.8rem;
		// font-weight: bold;
		.hasBtn {
			width: 3rem;
			color: #05b3b6;
			text-align: center;
			margin: 0 auto;
			border-radius: 0.4rem;
			background: rgba(127, 255, 0, 0);
			border: 0.02rem solid #05b3b6;
		}
		.btn {
			border-radius: 0.4rem;
			width: 2.6rem;
			text-align: center;
			color: #ffffff;
		}
		.brn_l {
			background-color: #05b3b6;
		}
		.btn_r {
			background-color: #f66759;
		}
	}
    .vtip{
		color: #cccccc;
		font-size: 0.3rem;
		margin-top: 0.45rem;
		text-align: center;
	}
}
@keyframes actPraise{
	0% { background-position: 0 0;}
	16% { background-position: 33% 0;}
	33% { background-position: 66% 0;}
	50% { background-position: 0 100%;}
	66% { background-position: 33% 100%;}
	88% { background-position: 66% 100%;}
	100% { background-position: 100% 0;}
}

.encourage{
	.vtxt {
		color: #999999;
		font-size: 0.34rem;
		font-weight: bold;
		margin-top: 0.2rem;
		text-align: center;
	}
	.ico_praise{
		width: 1.54rem;
		height: 1.54rem;
		margin: .6rem auto 0;
		background: #fff;
		box-shadow: 0 .05rem .2rem rgba($color: #dce1db, $alpha: .6);
		border-radius: 100%;
		span{
			display: block;
			background: url(../img/icon/encourage.png) no-repeat 0 center;
			background-size: 100%;
			width: .84rem; height: 100%;
			margin: 0 auto;
		}
		span.on{
			background: url(../img/icon/hasAggre.png) no-repeat 0 center;
			background-size: 100%;
		}
		span.active{
			background: url(../img/icon/praise_sprites.png) no-repeat 0 0;
			background-size: auto 200%;
			width: 1.13rem; height: 1.23rem;
			animation: actPraise steps(1,end) .5s forwards;
		}
	}
}

// 古诗背诵
.poe-list{
	display: flex;
	flex-direction: column;
    padding: .44rem 0;
    .btn_box{
        width: 4.26rem; height: .68rem;
		line-height: .68rem;
        margin: 0 auto;
        background: #f3f5f7;
        font-size: .32rem;
        color: #666666;
        border-radius: .34rem;
        text-align: center;
		.vbtn{
			width: 2.13rem; height: .68rem;
			color: #666666;
			float: left;
			&.on{
				background: #00cd86;
				border-radius: .32rem;
				color: #fff;
			}
		}
	}
	.vhead{
		color: #333333;
		font-size: .4rem; font-weight: bold;
		padding: .5rem .32rem .45rem;
		line-height: 1;
	}
    .list-body{
		width: 100%;
		flex: 1;
		position: relative;
		padding: 0 .32rem;
		overflow: auto;
		&.full{
			padding: 0;
		}
		.poetryList{
			padding: 0 .32rem;
		}
		.poetry{
			width: 100%; height: .96rem;
			border-radius: .2rem;
			margin-bottom: .2rem;
			padding: 0 .3rem;
			display: flex;
			line-height: .96rem;
			align-items: center;
			background: #f7f9fc;
			color: #333333;
			font-size: .36rem;
			.sign{
				width: .4rem;
				height: .4rem;
				background: url(../img/player/unBs.png) no-repeat;
				background-size: 100%;
				display: block;
				&.isRead{
					background: url(../img/player/hasBs.png) no-repeat;
					background-size: 100%;
				}
			}
			.num{
				width: .8rem;
				color: #adb9c7;
				font-size: .38rem;
			}
			.name{
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			&.on{
				background: #e5faf3;
				color: #00cd86;
			}
		}
	}

    .bottom-tips{
        text-align: center;
    }
}

// 复赛
.page-semifinal{
	padding-bottom: 4.7rem;
	.m-tab{
		display: flex;
		justify-content: space-between;
		padding: .4rem .36rem .5rem;
		.btnTab{
			width: 3.18rem; height: 1.06rem;
			&:nth-child(1){
				background: url(../img/preliminary/btn_org.png) no-repeat;
				background-size: 100%;
				&.teach{
					background: url(../img/preliminary/btn_class.png) no-repeat;
					background-size: 100%;
				}
			}
			&:nth-child(2){
				background: url(../img/preliminary/btn_list.png) no-repeat;
				background-size: 100%;
			}
		}
	}
	.plateBox{
		padding: .32rem .75rem 0 .84rem;
		height: 1.96rem;
		min-height: auto;
		&::after{
			display: none;
		}
	}
	.m-conlist{
		.rank_box{
			margin-bottom: .5rem;
		}
	}
	.nomal .vTabs_con{
		.table_head{
			margin: 0 0 .2rem;
		}
		.table_list {
			li:last-child .libox{
				border: none;
			}
			.vUpload{
				width: 1.2rem; height: .5rem;
				text-align: center;
				line-height: .5rem;
				font-size: .24rem; color: #fff;
				background: #82bdae;
				border-radius: .5rem;
				margin-right: -.2rem;
			}
			
		}
	}
}
